<script setup>
import Nav from "@/components/Nav.vue";

</script>

<template>
    <div class="container">
        <Nav :index="0"/>
        <div class="container-box">
            <div class="card">
                <div class="user-card">
                    <div class="user-avatar">邓</div>
                    <div class="user-info">
                        <div class="nickname">GINO</div>
                        <div class="tel">电话：18888888888</div>
                        <div class="email">邮箱：dzh_gino@163.com</div>
                    </div>
                </div>
                <div class="other-card often-card">
                    <div class="title">常用功能</div>
                    <div class="card-content">
                        <div class="item">
                            <div class="icon">人</div>
                            <div class="title">人员</div>
                        </div>
                        <div class="item">
                            <div class="icon">盘</div>
                            <div class="title">云盘</div>
                        </div>
                        <div class="item">
                            <div class="icon">库</div>
                            <div class="title">知识库</div>
                        </div>
                        <div class="item">
                            <div class="icon">更</div>
                            <div class="title">更多</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.container{
    .container-box{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: calc(100vh - 68px);
        margin-top: 68px;
        background: #f3f3f3;
        display: flex;
        justify-content: center;
        align-items: center;
        .card{
            width: 1400px;
            height: 800px;
            background: #fff;
            border-radius: 10px;
            padding: 60px;
        }
    }
}
.user-card{
    display: flex;
    align-items: center;
    .user-avatar{
        background-color: #e96835;
        color: #fff;
        width: 100px;
        height: 100px;
        border-radius: 999px;
        text-align: center;
        line-height: 100px;
        font-size: 50px;
    }
    .user-info{
        margin-left: 20px;
        line-height: 1;
        cursor: default;
        .nickname{
            color: var(--primary);
            margin-bottom: 10px;
            font-size: 20px;
            font-weight: 600;
        }
        .tel{
            margin-bottom: 5px;
        }
        .tel,.email{
            color: var(--placeholder-text);
        }
    }
}

.other-card{
    margin: 30px 0;
    .title{
        font-size: 16px;
        color: var(--regular-text);
        font-weight: bolder;
    }
    .card-content{
        width: 100%;
    }
}

.often-card{
    .card-content{
        padding: 10px 0;
        display: grid;
        grid-template-columns: repeat(10,1fr);
        .item{
            border:1px solid transparent;
            transition: all .3s;
            width: 80px;
            cursor: pointer;
            padding: 10px 5px;
            border-radius: 5px;
            .icon{
                border-radius: 5px;
                margin: 0 auto;
                width: 60px;
                height: 60px;
                background-color: var(--primary06);
                line-height: 60px;
                text-align: center;
                font-size: 26px;
                color: #fff;
                transition: .3s;
            }
            .title{
                text-align: center;
                font-size: 16px;
                margin-top: 5px;
            }
        }
        .item:hover{
            background-color: var(--primary01);
            border-color:var(--primary);
            .icon{
                background-color: var(--primary);
            }
            .title{
                color: var(--primary);
            }
        }
    }

}
</style>